<template>
  <div>
    <router-view></router-view>
    <!-- 占位 -->
    <div class="occupied"></div>
    <div class="footer-wrapper flex">
        <div v-for="(item,index) in iconData" :key="index" class="footer-icon-wrapper" @click="toPage(index)">
        <div class="f-center f-col" :class="index===tabIndex?'footer-active':''">
            <div class="footer-icon" >
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                  <tip-badge :badgeStyle='item.isBadge?badgeStyle:docStyle' :isBadge="item.isBadge"  v-if="item.isShow">{{item.count}}</tip-badge>
            </div>
            <div class="footer-name">{{item.name}}</div>
        </div> 
        </div>           
      </div>
  </div>
</template>

<script>
import tipBadge from './common/tipBadge';
import {Meteor} from 'meteor/meteor';
import { image, user,indexMsg, friends, messages,circleStatus,apply } from '../../api/collections/index';
export default {
  data(){
    return{
      id:sessionStorage.getItem('user'),
      iconData:[
    {
        name:'微信',
        icon:'#icon-liaotian',
        count:0,
        isBadge:true,
        isShow:false
    },
    {
        name:'通讯录',
        icon:'#icon-tongxunlu',
        count:0,
        isBadge:true,
        isShow:false


    },
    {
        name:'发现',
        icon:'#icon-faxian-copy',
        count:0,
        isBadge:false,
        isShow:false
    },
    {
        name:'我',
        icon:'#icon-wo',
        isBadge:false,
         count:0,
        isShow:false
    }
],
  badgeStyle:'right: -.5rem;top: 0rem;',
  docStyle:'right: -.1rem;top: .2rem;'
    }
  },
    meteor: {
    $subscribe: {
      'userInf': []
    },
    chatCount(){
        let count = 0
        let list = indexMsg.find({I_UserId:this.id}).fetch()
        list.forEach((e,i) => {
          let infWrapper = {}
           count = count + e.I_noReadCount
        });
        this.iconData[0].count = count
        if(count==0){
          this.iconData[0].isShow = false
        }else{
          this.iconData[0].isShow = true
        }
    },
    circleStstus(){
      let arr = circleStatus.find({fid:this.id,isRead:false}).fetch()
        if(arr.length!==0){
          this.iconData[2].isShow = true 
        }
        else{
          this.iconData[2].isShow = false 
        }
    },
      applyListCount(){
      const list = apply.find({A_FriendID:this.id}).fetch()
      let count = 0
      if(list.length>0){
        list.forEach(e=>{
          if(e.A_Status!==0){
            count = count + 1
          }
        })
        if(count!==0){
          this.iconData[1].isShow = true
          this.iconData[1].count = count
        }
        else{
          this.iconData[1].isShow = false
          this.iconData[1].count = 0
        }
      }
    }
    },
  computed:{
    tabIndex(){
      switch(this.$route.path){
        case '/home':return 0;
        break;
        case '/contacts':return 1;
        break;
        case '/found':return 2;
        break;
        case '/mine':return 3;
        break;
      }
    }
  },
  components:{
    tipBadge
  },
  mounted(){
  },
   methods: {
      toPage(index){
        if(index===this.tabIndex){
          return;
        }
        switch(index){
              case 0:this.$router.push('home');
              break;
              case 1:this.$router.push('contacts');
              break;
              case 2:this.$router.push('found');
              break;
              case 3:this.$router.push('mine');
              break;
              default:this.$router.push('noFound');
              break;   
          }
      }
  },
}
</script>

<style scoped>
.footer-wrapper{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-bottom: .2rem;
    border-top: .05rem solid #dddddd;
    background-color: #F7F7F7;
    z-index: 100;
    height: 1.9rem;
 }
    .footer-icon-wrapper{
       flex: 1;
    }
    .footer-icon{
    position: relative; 
    }
    .footer-icon .icon{
        font-size: .8rem;
    }
    .footer-name{
        font-size: .4rem;
    }
    .footer-active{
        color: #08BF62;
    }
  .occupied{
    height: 1.9rem;
    width: 100%;
  }
</style>
